<template>
  <div id="HomePage">
    <!-- 轮播图 -->
    <swiper
      id="swiper"
      :modules="modules"
      :slides-per-view="1"
      :space-between="0"
      navigation
      lazy
      loop
      autoplay
      :pagination="{
        clickable: true
      }"
    >
      <swiper-slide
        class="banner-swiper"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <img class="swiper-lazy" :data-src="item.img" alt="轮播图" />
        <div class="swiper-lazy-preloader"></div>
        <div class="swiper-slide-title">
          <h1>{{ item.title }}</h1>
          <p>{{ item.content }}</p>
        </div>
      </swiper-slide>
    </swiper>

    <!-- 软件产品展示 -->
    <div id="products" class="container-fuild">
      <div class="container products-container">
        <div class="products-title text-center wow fadeInUp">
          <h2>我们的公司产品</h2>
          <p>专业的技术团队，为您提供创新的产品解决方案</p>
        </div>
        
        <!-- 产品轮播 -->
        <swiper
          class="products-swiper wow fadeInUp"
          :modules="modules"
          :slides-per-view="1"
          :space-between="30"
          navigation
          loop
          autoplay
          :pagination="{
            clickable: true
          }"
          :breakpoints="{
            768: {
              slidesPerView: 2,
              spaceBetween: 30
            },
            1024: {
              slidesPerView: 3,
              spaceBetween: 30
            }
          }"
        >
          <swiper-slide
            v-for="(product, index) in productList"
            :key="index"
            class="product-slide"
          >
            <div class="product-card">
              <div class="product-image">
                <img :src="product.image" :alt="product.name" />
              </div>
              <div class="product-content">
                <h3>{{ product.name }}</h3>
                <p class="product-subtitle">{{ product.subtitle }}</p>
                <p class="product-description">{{ product.description }}</p>
                <div class="product-tags">
                  <span 
                    v-for="tag in product.tags" 
                    :key="tag" 
                    class="product-tag"
                  >{{ tag }}</span>
                </div>
                <router-link 
                  :to="product.link" 
                  class="btn btn-primary btn-block product-btn"
                >
                  了解更多
                </router-link>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <!-- 核心价值展示区 -->
    <div id="valueSection" class="container-fuild">
      <div class="container value-container">
        <div class="value-hero wow fadeInUp">
          <h1>创新科技，成就未来</h1>
          <p>我们专注于前沿技术，为企业数字化转型提供全方位解决方案</p>
        </div>
        
        <div class="value-grid">
          <div class="value-item wow fadeInUp" data-wow-delay="0.1s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-flash"></i>
            </div>
            <h3>高效创新</h3>
            <p>运用最新技术栈，快速响应需求变化，为客户创造更大价值</p>
          </div>
          
          <div class="value-item wow fadeInUp" data-wow-delay="0.2s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-shield"></i>
            </div>
            <h3>安全稳定</h3>
            <p>企业级安全防护，7x24小时监控，确保系统稳定运行</p>
          </div>
          
          <div class="value-item wow fadeInUp" data-wow-delay="0.3s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-user"></i>
            </div>
            <h3>专业团队</h3>
            <p>资深技术专家团队，提供从咨询到实施的全流程服务</p>
          </div>
          
          <div class="value-item wow fadeInUp" data-wow-delay="0.4s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-globe"></i>
            </div>
            <h3>全球视野</h3>
            <p>紧跟国际技术趋势，融合本土化需求，打造世界级产品</p>
          </div>

          <div class="value-item wow fadeInUp" data-wow-delay="0.5s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-cog"></i>
            </div>
            <h3>技术架构</h3>
            <p>采用微服务架构，模块化设计，确保系统高可用性和扩展性</p>
          </div>

          <div class="value-item wow fadeInUp" data-wow-delay="0.6s">
            <div class="value-icon">
              <i class="glyphicon glyphicon-heart"></i>
            </div>
            <h3>客户关怀</h3>
            <p>以客户需求为导向，提供贴心的售前售后服务支持</p>
          </div>
        </div>
      </div>
    </div>

    <!-- CTA区域 -->
    <div id="ctaSection" class="container-fuild text-center">
      <div class="container cta-container wow slideInUp">
        <h2>准备开始您的数字化之旅？</h2>
        <p>联系我们的专家团队，获取个性化解决方案</p>
        <div class="cta-buttons">
          <router-link to="/contactus" class="btn btn-primary btn-lg cta-btn primary">
            立即咨询
          </router-link>
          <router-link to="/service" class="btn btn-outline btn-lg cta-btn secondary">
            了解服务
          </router-link>
        </div>
      </div>
    </div>

    <!-- 客户评价 -->
    <div id="customer" class="container-fuild">
      <div class="container customer-container">
        <p class="customer-title text-center">客户评价</p>
        <swiper
          class="swiper-container customer-swiper hidden-xs"
          :modules="modules"
          :slides-per-view="1"
          :space-between="0"
          navigation
          loop
          autoplay
          :pagination="{
            clickable: true
          }"
        >
          <swiper-slide
            class="swiper-slide customer-block"
            v-for="(item, index) in customerList"
            :key="index"
          >
            <div class="customer-logo">
              <img class="center-block" :src="item.logo" alt="logo" />
            </div>
            <div class="customer-yh">
              <img src="@/assets/img/yinhao.png" alt="引号" />
            </div>
            <div class="customer-content1">
              <small>{{ item.content }}</small>
            </div>
            <div class="customer-content2">{{ item.title }}</div>
          </swiper-slide>
        </swiper>

        <div class="row visible-xs customer-block">
          <div
            class="col-xs-12"
            v-for="(item, index) in customerList"
            :key="index"
          >
            <div class="customer-logo">
              <img class="center-block" :src="item.logo" alt="logo" />
            </div>
            <div class="customer-yh">
              <img src="@/assets/img/yinhao.png" alt="引号" />
            </div>
            <div class="customer-content1">
              <small>{{ item.content }}</small>
            </div>
            <div class="customer-content2">
              <small>{{ item.title }}</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 合作伙伴 -->
    <div id="partners" class="container-fuild">
      <div class="container partners-container">
        <div class="partners-title text-center wow fadeInUp">
          <h2>合作伙伴</h2>
          <p>与众多知名企业建立深度合作，共同推动数字化发展</p>
        </div>
        
        <div class="partners-grid wow fadeInUp">
          <div class="partner-item">
            <div class="partner-logo">
              <img src="@/assets/img/logo_hp.png" alt="惠普" />
            </div>
            <h4>惠普公司</h4>
            <p>全球领先的技术解决方案提供商</p>
          </div>
          
          <div class="partner-item">
            <div class="partner-logo">
              <img src="@/assets/img/logo_kk.png" alt="可可科技" />
            </div>
            <h4>可可科技</h4>
            <p>专注于人工智能和大数据领域</p>
          </div>
          
          <div class="partner-item">
            <div class="partner-logo">
              <img src="@/assets/img/logo_toyota.png" alt="丰田" />
            </div>
            <h4>丰田集团</h4>
            <p>全球知名的汽车制造商</p>
          </div>
          
          <div class="partner-item">
            <div class="partner-logo">
              <div class="placeholder-logo">
                <span>腔阶科技</span>
              </div>
            </div>
            <h4>腔阶科技</h4>
            <p>云计算和大数据服务提供商</p>
          </div>
          
          <div class="partner-item">
            <div class="partner-logo">
              <div class="placeholder-logo">
                <span>智能未来</span>
              </div>
            </div>
            <h4>智能未来</h4>
            <p>IoT和边缘计算领域的创新者</p>
          </div>
          
          <div class="partner-item">
            <div class="partner-logo">
              <div class="placeholder-logo">
                <span>数据驱动</span>
              </div>
            </div>
            <h4>数据驱动</h4>
            <p>专业的数据分析和商业智能服务</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 为什么选择我们 -->
    <div id="whyChooseUs" class="conatiner-fuild">
      <div class="container">
        <div class="whyChooseUs-title text-center">
          <p>为什么选择我们的服务</p>
          <p>THE REASON TO CHOOSING US</p>
        </div>
        <div class="server-grid">
          <div
            class="server-item wow slideInUp"
            v-for="(item, index) in serverList"
            :key="index"
            :data-wow-delay="`${index * 0.1}s`"
          >
            <div class="server-block">
              <div class="server-icon">
                <img :src="item.logo" alt="logo" />
              </div>
              <h3 class="server-title">{{ item.title }}</h3>
              <div class="server-content" v-html="item.content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="HomePage">
import WOW from 'wow.js'
import { getCurrentInstance, onMounted } from 'vue'
// import Swiper from 'swiper'
import { Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

import banner1 from '@/assets/img/banner1.png'
import banner2 from '@/assets/img/banner2.jpg'

import logo_hp from '@/assets/img/logo_hp.png'
import logo_kk from '@/assets/img/logo_kk.png'
import logo_toyota from '@/assets/img/logo_toyota.png'

import img_tel from '@/assets/img/tel.png'
import img_computer from '@/assets/img/computer.png'
import img_qq from '@/assets/img/qq.png'
import img_skill from '@/assets/img/skill.png'

import service1 from '@/assets/img/service1.jpg'
import service2 from '@/assets/img/service2.jpg'
import service3 from '@/assets/img/service3.jpg'

const swiperList = [
  {
    img: banner1,
    title: '领航未来科技，共创智慧生活',
    content: '我们致力于通过前沿的技术创新，为用户提供更加智能、便捷的生活体验。加入我们，共同探索无限可能。'
  },
  {
    img: banner2,
    title: '以客户为中心，打造卓越服务',
    content: '凭借专业的团队和严谨的态度，我们为每一位客户提供量身定制的解决方案，确保满足您的每一个需求。'
  },
  {
    img: banner1,
    title: '践行绿色可持续，构建美好明天',
    content: '承担社会责任，坚持环保理念，通过我们的产品和服务，助力实现人与自然和谐共生的美好愿景。'
  },
  {
    img: banner2,
    title: ' 您的满意，我们的追求',
    content: '不断超越自我，只为给您带来最优质的产品和服务体验。在这里，每一次交互都充满温暖与关怀。'
  }
]

const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]

// 产品数据
const productList = [
  {
    name: '创业者之家平台',
    subtitle: '专注于创业支持的综合性平台',
    description: '提供商业计划书生成、市场分析、财务计算等创业工具，帮助创业者快速启动和发展业务。',
    image: service1,
    tags: ['Next.js 14', 'TypeScript', 'AI辅助'],
    link: '/software/smartTown'
  },
  {
    name: 'GuDB数据库引擎',
    subtitle: '轻量级嵌入式关系型数据库',
    description:
      '小到2MB，快到10万QPS。MySQL语法兼容，PostgreSQL内核，专为资源受限环境设计。',
    image: service2,
    tags: ['C99', '高性能', '嵌入式'],
    link: '/software/bigData'
  },
  {
    name: '箱野盲盒商城',
    subtitle: '一箱未知，十倍惊喜',
    description: '创新的盲盒电商平台，将滞留包裹重新包装成惊喜盲盒，重新定义盲盒经济。',
    image: service3,
    tags: ['Next.js 14', '创新商业', '循环经济'],
    link: '/software/surpriseYard'
  }
]

const customerList = [
  {
    logo: logo_hp,
    title: '张先生 - 创业者之家平台用户',
    content: '使用创业者之家平台后，我的创业计划变得更加清晰和可行。AI驱动的商业计划书生成器帮助我快速整理了思路，不到一个月就获得了天使投资。真正解决了初创企业的痛点。'
  },
  {
    logo: logo_kk,
    title: '李女士 - GuDB数据库开发者',
    content: 'GuDB的性能表现让我惊喜，仅仅2MB的大小却能达到这10万QPS。最重要的是与MySQL的高度兼容性，让我们的项目迁移非常平滑。在资源受限的IoT环境下，这个数据库简直是神器。'
  },
  {
    logo: logo_toyota,
    title: '王先生 - 箱野盲盒体验者',
    content: '作为一个盲盒爱好者，箱野带给我的体验超出了预期。每次开箱都充满惊喜，不仅物品质量靠谱，价格也非常实惠。更重要的是参与了环保循环，让消费更有意义。'
  },
  {
    logo: logo_kk,
    title: '陈总 - 企业客户',
    content: '作为一家中型电商公司的CTO，我们选择了这家公司的技术解决方案。他们的团队非常专业，从需求分析到项目交付，整个过程都非常高效。特别是他们的数据库优化方案，让我们的系统性能提升了30%以上。'
  },
  {
    logo: logo_hp,
    title: '刘女士 - 产品经理',
    content: '在数字化转型的过程中，我们遇到了很多挑战。这家公司的专业咨询服务帮助我们制定了合理的技术路线，他们的产品也非常符合我们的业务需求。现在我们的业务效率提升了一倍多。'
  }
]

const serverList = [
  {
    logo: img_tel,
    title: '专业客服',
    content: '<p>由专业客服提供人工服务</p>负责疑难问题和故障受理'
  },
  {
    logo: img_computer,
    title: '远程协助',
    content: '<p>利用远程视频工具，提供协助</p>帮助客户进行调试、解决故障'
  },
  {
    logo: img_qq,
    title: '在线支持',
    content: '<p>利用企业QQ提供在线解答</p>帮助企业快速准确解决问题和故障'
  },
  {
    logo: img_skill,
    title: '技术专家',
    content: '<p>由技术支持工程师，负责问题解答</p>需求受理及故障受理'
  },
  {
    logo: img_tel,
    title: '定制开发',
    content: '<p>根据客户特定需求提供定制化解决方案</p>从需求分析到产品交付的全流程服务'
  },
  {
    logo: img_computer,
    title: '持续维护',
    content: '<p>提供长期的系统维护和升级服务</p>确保产品稳定运行和技术持续迭代'
  }
]

// const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
onMounted(() => {
  // console.log('mounted', proxy)
  // console.log(proxy.$wow, '------')
  /* wowjs动画 */
  new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
  }).init()
})
</script>

<style scoped>
/* 整体盒子 - 苹果风格 */
#HomePage {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background: #fbfbfd;
}

/* 顶部轮播图 - 苹果风格 */
#swiper {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  max-height: 800px;
  position: relative;
  overflow: hidden;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}

#swiper .banner-swiper:hover img {
  transform: scale(1);
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(30px);
  animation: slideInUp 1s ease-out 0.3s forwards;
}

#swiper .banner-swiper .swiper-slide-title > p {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 800px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(30px);
  animation: slideInUp 1s ease-out 0.6s forwards;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 软件产品展示 - 苹果风格 */
#products {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
}

#products::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.products-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.products-title {
  margin-bottom: 80px;
  text-align: center;
}

.products-title h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.products-title p {
  font-size: 21px;
  font-weight: 400;
  color: #86868b;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.products-swiper {
  padding: 0 0 60px;
}

.product-slide {
  height: auto;
  padding: 0 10px;
}

.product-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

.product-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: scale(1);
}

.product-card:hover .product-image img {
  transform: scale(1.08);
}

.product-content {
  padding: 32px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-content h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.product-subtitle {
  font-size: 15px;
  color: #0071e3;
  margin: 0 0 16px 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.product-description {
  font-size: 16px;
  color: #515154;
  line-height: 1.5;
  margin: 0 0 24px 0;
  flex: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.product-tags {
  margin: 0 0 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-tag {
  display: inline-block;
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0, 113, 227, 0.1);
}

.product-btn {
  margin-top: auto;
  background: #0071e3;
  border: none;
  border-radius: 980px;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-block;
}

.product-btn:hover {
  background: #0077ed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
  color: #ffffff;
  text-decoration: none;
}

/* 核心价值展示区 - 苹果风格 */
#valueSection {
  padding: 140px 0;
  background: #f5f5f7;
  position: relative;
}

#valueSection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

.value-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.value-hero {
  text-align: center;
  margin-bottom: 100px;
}

.value-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.value-hero p {
  font-size: 21px;
  font-weight: 400;
  color: #86868b;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 80px;
}

.value-item {
  text-align: center;
  padding: 48px 32px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.value-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.02) 0%, rgba(0, 113, 227, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.value-item:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 113, 227, 0.1);
}

.value-item:hover::before {
  opacity: 1;
}

.value-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 32px;
  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 1;
}

.value-item:hover .value-icon {
  transform: scale(1.05) translateZ(0);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.3);
}

.value-icon i {
  font-size: 28px;
  color: #ffffff;
  font-weight: 400;
}

.value-item h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  line-height: 1.17;
  position: relative;
  z-index: 1;
}

.value-item p {
  font-size: 17px;
  font-weight: 400;
  color: #515154;
  line-height: 1.47;
  margin: 0;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* CTA区域 - 苹果风格 */
#ctaSection {
  padding: 120px 0;
  background: #1d1d1f;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
}

#ctaSection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(0, 113, 227, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-container h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #f5f5f7;
}

.cta-container p {
  font-size: 21px;
  font-weight: 400;
  color: #a1a1a6;
  margin: 0 0 48px 0;
  line-height: 1.38;
  letter-spacing: -0.01em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.cta-btn {
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 400;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: none;
  min-width: 180px;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.cta-btn.primary {
  background: #0071e3;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.39);
}

.cta-btn.primary:hover {
  background: #0077ed;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.5);
  color: #ffffff;
  text-decoration: none;
}

.cta-btn.secondary {
  background: transparent;
  color: #0071e3;
  border: 2px solid rgba(0, 113, 227, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-btn.secondary:hover {
  background: rgba(0, 113, 227, 0.1);
  border-color: #0071e3;
  color: #0077ed;
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.2);
}

/* 客户评价 - 苹果风格 */
#customer {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
}

#customer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

.customer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

#customer .customer-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 80px 0;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

#customer .customer-block {
  background: #f5f5f7;
  padding: 48px 60px;
  border-radius: 18px;
  margin: 0 10px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

#customer .customer-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}

#customer .customer-logo {
  margin-bottom: 32px;
}

#customer .customer-logo img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

#customer .customer-yh {
  margin-bottom: 24px;
}

#customer .customer-yh img {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

#customer .customer-content1 {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 113, 227, 0.1);
  margin-bottom: 24px;
}

#customer .customer-content1 small {
  font-size: 17px;
  font-weight: 400;
  color: #515154;
  line-height: 1.47;
  letter-spacing: -0.01em;
}

#customer .customer-content2 {
  font-size: 15px;
  font-weight: 500;
  color: #0071e3;
  letter-spacing: -0.01em;
}

#customer .customer-content2 small {
  font-size: 15px;
  font-weight: 500;
  color: #0071e3;
}

/* 合作伙伴 - 苹果风格 */
#partners {
  padding: 120px 0;
  background: #f5f5f7;
  position: relative;
}

#partners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

.partners-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.partners-title {
  margin-bottom: 80px;
  text-align: center;
}

.partners-title h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.partners-title p {
  font-size: 19px;
  font-weight: 400;
  color: #86868b;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.42;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.partner-item {
  background: #ffffff;
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.partner-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.02) 0%, rgba(0, 113, 227, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.partner-item:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 113, 227, 0.1);
}

.partner-item:hover::before {
  opacity: 1;
}

.partner-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-logo {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.partner-item h4 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.partner-item p {
  font-size: 15px;
  font-weight: 400;
  color: #86868b;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* 为什么选择我们 - 苹果风格 */
#whyChooseUs {
  padding: 140px 0;
  background: #ffffff;
  position: relative;
}

#whyChooseUs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

#whyChooseUs .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 80px;
  text-align: center;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 15px;
  font-weight: 500;
  color: #86868b;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* 修复对齐问题 */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: stretch;
}

.server-item {
  display: flex;
  height: 100%;
}

.server-block {
  padding: 48px 32px;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.server-block:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 113, 227, 0.1);
  background: #ffffff;
}

.server-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.02) 0%, rgba(0, 113, 227, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.server-block:hover::before {
  opacity: 1;
}

.server-icon {
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.server-icon img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}

.server-title {
  font-size: 22px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.server-content {
  font-size: 17px;
  font-weight: 400;
  color: #515154;
  line-height: 1.47;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  flex: 1;
}

.server-content p {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 400;
  color: #515154;
}

.server-content p:last-child {
  margin-bottom: 0;
}

/* 移动端响应式设计 - 苹果风格 */
@media screen and (max-width: 768px) {
  #HomePage {
    background: #ffffff;
  }

  #swiper {
    height: 60vh;
    min-height: 400px;
  }

  #swiper .banner-swiper .swiper-slide-title > h1 {
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: 16px;
  }

  #swiper .banner-swiper .swiper-slide-title > p {
    font-size: clamp(14px, 4vw, 18px);
    padding: 0 20px;
  }

  #products {
    padding: 80px 0;
  }

  .products-container {
    padding: 0 16px;
  }

  .products-title {
    margin-bottom: 60px;
  }

  .product-slide {
    padding: 0 8px;
  }

  .product-content {
    padding: 24px 20px 20px;
  }

  /* 移动端价值展示区 */
  #valueSection {
    padding: 80px 0;
  }

  .value-container {
    padding: 0 16px;
  }

  .value-hero {
    margin-bottom: 60px;
  }

  .value-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 60px;
  }

  .value-item {
    padding: 32px 24px;
  }

  .value-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
  }

  .value-icon i {
    font-size: 24px;
  }

  /* 移动端CTA区域 */
  #ctaSection {
    padding: 80px 0;
  }

  .cta-container {
    padding: 0 16px;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .cta-btn {
    width: 100%;
    max-width: 320px;
    min-width: auto;
  }

  /* 移动端客户评价 */
  #customer {
    padding: 80px 0;
  }

  .customer-container {
    padding: 0 16px;
  }

  #customer .customer-title {
    margin-bottom: 60px;
  }

  #customer .customer-block {
    padding: 32px 24px;
    margin: 0 4px;
  }

  #customer .customer-logo img {
    width: 64px;
    height: 64px;
  }

  #customer .customer-yh img {
    width: 24px;
    height: 24px;
  }

  #customer .customer-content1 {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  #customer .customer-content1 small {
    font-size: 15px;
  }

  #customer .customer-content2,
  #customer .customer-content2 small {
    font-size: 13px;
  }

  /* 移动端合作伙伴 */
  #partners {
    padding: 80px 0;
  }

  .partners-container {
    padding: 0 16px;
  }

  .partners-title {
    margin-bottom: 60px;
  }

  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

  .partner-item {
    padding: 32px 24px;
  }

  .partner-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
  }

  .partner-item h4 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .partner-item p {
    font-size: 14px;
  }

  /* 移动端选择我们的理由 */
  #whyChooseUs {
    padding: 80px 0;
  }

  #whyChooseUs .container {
    padding: 0 16px;
  }

  #whyChooseUs .whyChooseUs-title {
    margin-bottom: 60px;
  }

  .server-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .server-block {
    padding: 32px 24px;
  }

  .server-icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
  }

  .server-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .server-content {
    font-size: 15px;
  }

  .server-content p {
    font-size: 15px;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }

  #bigData {
    padding: 60px;
  }

  #bigData .bigData-title {
    font-size: 30px;
  }

  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }

  #contactUs {
    height: 300px;
  }

  #contactUs .contactUs-container {
    padding-top: 50px;
  }

  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }

  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }

  #customer .customer-title {
    font-size: 24px;
  }

  #whyChooseUs {
    padding: 20px 0;
  }
}
</style>

